<script lang="ts" setup>
import { watchEffect, defineProps, ref, onUnmounted } from "vue";
import * as echarts from "echarts";

const props = defineProps<{
  data: {
    name: string;
    value: number;
    min?: number;
    max?: number;
    splitNumber?: number;
    unit?: string;
  }[];
}>();
const chartRef = ref();
let myChart = null;
// 单仪表盘
const initSingle = () => {
  if (!chartRef.value) {
    return;
  }
  if (!myChart) {
    // myChart.clear();
    myChart = echarts.init(chartRef.value);
  } else {
    // myChart = echarts.init(chartRef.value);
  }
  const { data } = props;
  const option = {
    series: [
      {
        type: "gauge",
        radius: "100%",
        startAngle: 215,
        endAngle: -35,
        min: data[0].min || 0,
        max: data[0].max || data[0].max === 0 ? data[0].max : 100,
        progress: {
          show: true,
          width: 10,
          itemStyle: {
            color: {
              type: "linear",
              x: 1,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "#66E1DF" // 0% 处的颜色
                },
                {
                  offset: 0.4,
                  color: "#009DFF"
                }
              ],
              global: false // 缺省为 false
            }
          }
        },
        splitNumber: data[0].splitNumber || 10,
        axisLine: {
          lineStyle: {
            width: 10,
            color: [[1, "#0E3455"]]
          }
        },
        axisTick: {
          show: true,
          distance: 1,
          splitNumber: 5,
          length: 3
        },
        splitLine: {
          length: 6,
          distance: 1,
          lineStyle: {
            width: 2,
            color: "#999"
          }
        },
        pointer: {
          width: 3,
          itemStyle: {
            color: "#009DFF"
          }
        },
        axisLabel: {
          distance: 10,
          color: "rgb(188, 190, 192)",
          fontSize: data[0].labelFontSize || 5
        },
        title: {
          show: false
        },
        detail: {
          show: false
        },
        data: [
          {
            value: data[0].value?.toFixed(2)
          }
        ]
      }
    ]
  };
  option && myChart.setOption(option, false);
};
// 双仪表盘
const initDouble = () => {
  if (!chartRef.value) {
    return;
  }
  if (!myChart) {
    myChart = echarts.init(chartRef.value);
    // myChart.clear();
  } else {
    // myChart = echarts.init(chartRef.value);
  }
  const { data } = props;
  const option = {
    series: [
      {
        type: "gauge",
        radius: "66%",
        startAngle: 215,
        endAngle: -35,
        min: data[1].min || 0,
        max: data[1].max || 100,
        progress: {
          show: true,
          width: 6,
          itemStyle: {
            color: "#66E1DF"
          }
        },
        splitNumber: data[1].splitNumber || 10,
        axisLine: {
          lineStyle: {
            width: 6,
            color: [[1, "#0E3455"]]
          }
        },
        axisTick: {
          show: true,
          distance: 1,
          splitNumber: 5,
          length: 1
        },
        splitLine: {
          length: 3,
          distance: 1,
          lineStyle: {
            width: 2,
            color: "#999"
          }
        },
        pointer: {
          width: 3,
          length: "66%",
          itemStyle: {
            color: "#66E1DF"
          }
        },
        axisLabel: {
          distance: 7,
          color: "rgb(188, 190, 192)",
          fontSize: 5
        },
        title: {
          show: false
        },
        detail: {
          show: false
        },
        data: [
          {
            value: data[1].value?.toFixed(2)
          }
        ]
      },
      {
        type: "gauge",
        radius: "100%",
        startAngle: 215,
        endAngle: -35,
        min: data[0].min || 0,
        max: data[0].max || 100,
        progress: {
          show: true,
          width: 6,
          itemStyle: {
            color: "#009DFF"
          }
        },
        splitNumber: data[0].splitNumber || 10,
        axisLine: {
          lineStyle: {
            width: 6,
            color: [[1, "#0E3455"]]
          }
        },
        axisTick: {
          show: true,
          distance: 1,
          splitNumber: 5,
          length: 1
        },
        splitLine: {
          length: 2,
          distance: 1,
          lineStyle: {
            width: 3,
            color: "#999"
          }
        },
        pointer: {
          width: 3,
          length: "66%",
          itemStyle: {
            color: "#009DFF"
          }
        },
        axisLabel: {
          distance: 7,
          color: "rgb(188, 190, 192)",
          fontSize: data[0].labelFontSize || 5
        },
        title: {
          show: false
        },
        detail: {
          show: false
        },
        data: [
          {
            value: data[0].value?.toFixed(2)
          }
        ]
      }
    ]
  };
  myChart && myChart.setOption(option, false);
};
watchEffect(() => {
  if (props.data.length === 1) {
    initSingle();
  } else {
    initDouble();
  }
});
onUnmounted(() => {
  myChart && myChart.dispose();
});
</script>
<template>
  <div :class="['chart-container', data.length > 1 ? 'double' : ''].join(' ')">
    <div ref="chartRef" class="chart-guage"></div>
    <div class="label-single" v-if="data.length === 1">
      <div class="label-single-num">{{ data[0].value?.toFixed(2) }}</div>
      <div class="label-single-text">{{ data[0].name }}</div>
    </div>
    <ul class="label-double" v-else>
      <li class="label-double-item">
        <div class="label-double-text">{{ data[0].name }}</div>
        <div class="label-double-num">{{ data[0].value?.toFixed(2) }}{{ data[0].unit }}</div>
      </li>
      <li class="label-double-item">
        <div class="label-double-text">{{ data[1].name }}</div>
        <div class="label-double-num">{{ data[1].value?.toFixed(2) }}{{ data[1].unit }}</div>
      </li>
    </ul>
  </div>
</template>
<style lang="scss" scoped>
.chart-container {
  width: 100%;
  padding: 0 24px;
  position: relative;
  &.double {
    height: 156px;
  }
}
:deep(canvas) {
  cursor: pointer;
}
.chart-guage {
  width: 128px;
  height: 128px;
  margin: 0 auto;
}
.label-single {
  width: calc(100% - 48px);
  position: absolute;
  top: 94px;
  text-align: center;
  &-num {
    color: rgba(208, 222, 238, 1);
    font-family: "TCloudNumber";
    font-weight: 400;
    font-size: 20px;
    line-height: 24px;
    height: 24px;
  }
  &-text {
    color: rgba(177, 189, 202, 1);
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
  }
}
.label-double {
  width: calc(100% - 48px);
  position: absolute;
  bottom: 0;
  .label-double-name {
    text-align: center;
    color: rgba(79, 132, 212, 1);
    font-family: "Alibaba PuHuiTi 3.0";
    font-weight: 600;
    font-size: 16px;
    line-height: 18px;
    position: relative;
    top: 0px;
    margin-bottom: 10px;
  }
  .label-double-item {
    display: flex;
    justify-content: space-between;
    .label-double-text {
      margin-right: 5px;
      color: rgba(177, 189, 202, 1);
      font-weight: 400;
      font-size: 14px;
      line-height: 18px;
    }
    .label-double-num {
      height: 20px;
      color: rgba(208, 222, 238, 1);
      font-weight: 500;
      font-size: 16px;
      line-height: 20px;
    }
  }
}
</style>
